.root {
	width: 100vw;
	overflow-y: scroll;
	:global {
		.channel-header {
			position: relative;
			height: 44px;
			padding: 13px 0;

			.icon {
				position: absolute;
				right: 16px;
				width: 18px;
				height: 18px;
			}
		}

		.channel-content {
			padding: 0 16px;

			.channel-item {
				margin-bottom: 16px;

				&.edit {
					.channel-item-edit {
						color: #fff;
						background-color: #de644b;
					}
					.icon {
						display: block;
					}
				}
			}

			.channel-item-header {
				position: relative;
				height: 22px;
				line-height: 22px;
				margin-bottom: 22px;

				.channel-item-title {
					margin-right: 10px;
					font-size: 17px;
					color: #333;
					font-weight: 500;
				}

				.channel-item-title-extra {
					font-size: 12px;
					color: #a5a6ab;
				}

				.channel-item-edit {
					display: inline-block;
					position: absolute;
					right: 0;
					width: 52px;
					height: 22px;
					line-height: 20px;
					border: 1px solid #de644b;
					border-radius: 12px;
					color: #de644b;
					text-align: center;
					font-size: 12px;
				}
			}

			.channel-list {
				&-item {
					position: relative;
					display: inline-block;
					padding: 11px 15px;
					margin-right: 13px;
					margin-bottom: 16px;
					border-radius: 18px;
					color: #3a3948;
					background-color: #f7f8fa;

					.icon {
						display: none;
						position: absolute;
						top: -5px;
						right: 0;
					}
				}

				&-item.selected {
					color: #fc6627;
				}
			}
		}
	}
}
